<template>
    <div class="job-specification">
        <!-- 优化返回链接样式 -->
        <span style="display: flex;justify-content: space-between;">
            <router-link to="/main/renshi/kaoqing" class="back-link"><i class="el-icon-arrow-left">返回</i></router-link>
            <span class="back-link" @click="printForm" style="font-weight: bold;">打印</span>
        </span>
        <div class="page">
            <!-- 主表格 -->
            <table class="main-table" title="双击可修改">
                <thead>
                    <tr>
                        <th colspan="6" class="table-title">职位说明书</th>
                    </tr>
                    <tr>
                        <td colspan="6">职位说明书内容：1. 任职资格与甄选；2. 主要工作内容/职责描述；3. 关键绩效指标与验证；4. 职位发展通道；5. 任职流程；6. 员工任职资格说明。
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 40%;" @dblclick="editCell('jobInfo', 'companyDepartmentLabel')">{{
                            jobInfo.companyDepartmentLabel
                            }}
                        </td>
                        <td style="width: 20%;" colspan="2" @dblclick="editCell('jobInfo', 'companyDepartment')">{{
                            jobInfo.companyDepartment }}
                        </td>
                        <td style="width: 20%;" @dblclick="editCell('jobInfo', 'specificDepartmentLabel')">{{
                            jobInfo.specificDepartmentLabel }}
                        </td>
                        <td style="width: 20%;" colspan="2" @dblclick="editCell('jobInfo', 'specificDepartment')">{{
                            jobInfo.specificDepartment
                            }}
                        </td>
                    </tr>
                    <tr>
                        <td @dblclick="editCell('jobInfo', 'jobTitleLabel')">{{ jobInfo.jobTitleLabel }}</td>
                        <td colspan="2" @dblclick="editCell('jobInfo', 'jobTitle')">{{ jobInfo.jobTitle }}</td>
                        <td @dblclick="editCell('jobInfo', 'directSupervisorLabel')">
                            {{ jobInfo.directSupervisorLabel }}</td>
                        <td colspan="2" @dblclick="editCell('jobInfo', 'directSupervisor')">{{ jobInfo.directSupervisor
                            }}
                        </td>
                    </tr>
                    <tr>
                        <td @dblclick="editCell('jobInfo', 'jobProxyLabel')">{{ jobInfo.jobProxyLabel }}</td>
                        <td colspan="5" @dblclick="editCell('jobInfo', 'jobProxy')">{{ jobInfo.jobProxy }}</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="6">
                            <h3 class="section-title">任职资格与甄选</h3>
                            <!-- 子表格 -->
                            <table class="sub-table">
                                <tr>
                                    <td rowspan="5">硬件条件</td>
                                    <td>1. 年龄性别要求</td>
                                    <td v-text="hardwareConditions.ageGender"
                                        @dblclick="editCell('hardwareConditions', 'ageGender')"></td>
                                    <td rowspan="5">面试测试项目（必备技能）</td>
                                    <td v-text="interviewItems.attendanceSkill"
                                        @dblclick="editCell('interviewItems', 'attendanceSkill')"></td>
                                </tr>
                                <tr>
                                    <td>2. 学历要求</td>
                                    <td v-text="hardwareConditions.education"
                                        @dblclick="editCell('hardwareConditions', 'education')"></td>
                                    <td v-text="interviewItems.hrKnowledge"
                                        @dblclick="editCell('interviewItems', 'hrKnowledge')"></td>
                                </tr>
                                <tr>
                                    <td>3. 工作经验要求</td>
                                    <td v-text="hardwareConditions.workExperience"
                                        @dblclick="editCell('hardwareConditions', 'workExperience')"></td>
                                    <td v-text="interviewItems.computerLevel"
                                        @dblclick="editCell('interviewItems', 'computerLevel')"></td>
                                </tr>
                                <tr>
                                    <td>4. 专业要求</td>
                                    <td v-text="hardwareConditions.major"
                                        @dblclick="editCell('hardwareConditions', 'major')"></td>
                                    <td v-text="interviewItems.communicationSkill"
                                        @dblclick="editCell('interviewItems', 'communicationSkill')"></td>
                                </tr>
                                <tr>
                                    <td>5. 其他要求</td>
                                    <td v-text="hardwareConditions.other"
                                        @dblclick="editCell('hardwareConditions', 'other')"></td>
                                    <td v-text="interviewItems.otherSkill"
                                        @dblclick="editCell('interviewItems', 'otherSkill')"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <h3 class="section-title">主要工作内容/职责描述</h3>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;" colspan="3" v-text="responsibilities[0]"
                            @dblclick="editCell('responsibilities', 0)"></td>
                        <td style="text-align: left;" colspan="3"></td>
                    </tr>
                    <tr>
                        <td style="text-align: left;" colspan="3" v-text="responsibilities[1]"
                            @dblclick="editCell('responsibilities', 1)"></td>
                        <td style="text-align: left;" colspan="3"></td>
                    </tr>
                    <tr>
                        <td style="text-align: left;" colspan="3" v-text="responsibilities[2]"
                            @dblclick="editCell('responsibilities', 2)"></td>
                        <td style="text-align: left;" colspan="3"></td>
                    </tr>
                    <!-- <tr>
                        <td style="text-align: left;" colspan="3"></td>
                        <td style="text-align: left;" colspan="3"></td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="page">
            <table class="main-table" title="双击可修改">
                <tbody>
                    <tr>
                        <td colspan="6">
                            <h3 class="section-title">关键绩效指标与验证</h3>
                            <table class="sub-table">
                                <tr>
                                    <td rowspan="2">关键绩效指标</td>
                                    <td colspan="2">绩效指标验证途径</td>
                                </tr>
                                <tr>
                                    <td>评核部门负责人职位名称</td>
                                    <td>数据验证报表</td>
                                </tr>
                                <tr>
                                    <td @dblclick="editCell('kpis', 0, 'name')">{{ kpis[0].name }}</td>
                                    <td @dblclick="editCell('kpis', 0, 'evaluator')">{{ kpis[0].evaluator }}</td>
                                    <td @dblclick="editCell('kpis', 0, 'dataSource')">
                                        {{ kpis[0].dataSource }}</td>
                                </tr>
                                <tr>
                                    <td @dblclick="editCell('kpis', 1, 'name')">{{ kpis[1].name }}</td>
                                    <td @dblclick="editCell('kpis', 1, 'evaluator')">{{ kpis[1].evaluator }}</td>
                                    <td @dblclick="editCell('kpis', 1, 'dataSource')">{{ kpis[1].dataSource }}</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <h3 class="section-title">职位必修课</h3>
                            <ul>
                                <li v-for="(course, index) in courses" :key="index" v-text="course"
                                    @dblclick="editCell('courses', index)"></li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <h3 class="section-title">晋升通道</h3>
                            <ol>
                                <li v-for="(path, index) in promotionPaths" :key="index" v-text="path"
                                    @dblclick="editCell('promotionPaths', index)"></li>
                            </ol>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <h3 class="section-title">新人工作规范指引</h3>
                            <table class="sub-table">
                                <tr>
                                    <td>必须掌握的工作内容</td>
                                    <td>工作指引人 职位名称</td>
                                    <td>工作班次/配套文件名称</td>
                                </tr>
                                <tr>
                                    <td @dblclick="editCell('newcomerGuide', 0, 'content')">{{
                                        newcomerGuide[0].content
                                    }}
                                    </td>
                                    <td @dblclick="editCell('newcomerGuide', 0, 'guide')">
                                        {{ newcomerGuide[0].guide }}</td>
                                    <td @dblclick="editCell('newcomerGuide', 0, 'document')">{{
                                        newcomerGuide[0].document }}
                                    </td>
                                </tr>
                                <tr>
                                    <td @dblclick="editCell('newcomerGuide', 1, 'content')">{{
                                        newcomerGuide[1].content
                                    }}
                                    </td>
                                    <td @dblclick="editCell('newcomerGuide', 1, 'guide')">
                                        {{ newcomerGuide[1].guide }}</td>
                                    <td @dblclick="editCell('newcomerGuide', 1, 'document')">{{
                                        newcomerGuide[1].document }}
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            复核：<input style="width:50%;border: none;" type="text" v-model="opinion.reviewer" />
                        </td>
                        <td>
                            审核：<input style="width:50%;border: none;" type="text" v-model="opinion.reviewedBy" />
                        </td>
                        <td colspan="3">
                            制订：<input style="width:50%;border: none;" type="text" v-model="opinion.president" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    name: "JobSpecification",
    data() {
        return {
            opinion: {
                reviewer: "",
                reviewedBy: "",
                president: ""

            },
            jobInfo: {
                companyDepartmentLabel: '所属部门（分公司）____________',
                companyDepartment: '企业管理部',
                specificDepartmentLabel: '具体部门',
                specificDepartment: '企业管理部',
                jobTitleLabel: '职务名称',
                jobTitle: '考勤专员',
                directSupervisorLabel: '直接上级',
                directSupervisor: '系统运营主管',
                jobProxyLabel: '职务代理',
                jobProxy: '系统运营主管'
            },
            hardwareConditions: {
                ageGender: "20-30周岁之间，女性",
                education: "大专（含）以上学历",
                workExperience: "同职位1年以上工作经验",
                major: "不限",
                other: "不限"
            },
            interviewItems: {
                attendanceSkill: "考勤、薪酬专业技能；",
                hrKnowledge: "人力资源相关知识；",
                computerLevel: "计算机水平；",
                communicationSkill: "沟通表达能力；",
                otherSkill: ""
            },
            responsibilities: [
                "1、负责全体职员工考勤处理（含资料录入、异常跟进、异常考勤修改等）;",
                "2、负责各类考勤资料的保管；",
                "3、上级领导安排的其他工作。"
            ],
            kpis: [
                {
                    name: "考勤处理及时性、准确性",
                    evaluator: "系统运营主管",
                    dataSource: "人力资源系统中考勤数据及部门反馈"
                },
                {
                    name: "工作责任心",
                    evaluator: "系统运营主管",
                    dataSource: "/"
                }
            ],
            courses: [
                "1、劳动法律法规；",
                "2、考勤、薪酬相关知识",
                "3、有效沟通技巧"
            ],
            promotionPaths: [
                "晋升通道1：1、考勤专员→薪资专员-薪资主管",
                "晋升通道2：2、考勤专员→人事专员-人事主管"
            ],
            newcomerGuide: [
                {
                    content: "缺勤类别的判定、工时处理",
                    guide: "系统运营主管",
                    document: "《考勤管理办法》"
                },
                {
                    content: "考勤、薪资相关规定",
                    guide: "系统运营主管",
                    document: "《薪资管理办法》"
                }
            ]
        };
    },
    methods: {
        editCell(objName, index, prop) {
            let obj = this[objName];
            let value;
            if (prop) {
                value = obj[index][prop];
            } else {
                value = obj[index];
            }
            let input = prompt("请输入修改后的值", value);
            if (input !== null) {
                if (prop) {
                    obj[index][prop] = input;
                } else {
                    obj[index] = input;
                }
            }
        },
        printForm() {
            window.print();
        }
    }
};
</script>

<style scoped>
/* 统一字体 */
.job-specification {
    font-family: '宋体';
    max-width: 210mm;
    overflow-x: auto;
    padding: 20px;
    margin: 0px auto;
}

.page {
    width: 210mm;
    height: 297mm;
    padding: 15mm;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    page-break-after: always;
    text-align: left;
    line-height: 29.3326px;
    letter-spacing: 0.1039em;
    margin: 10px auto;
}

/* 返回链接样式 */
.back-link {
    position: relative;
    display: flex;
    margin-bottom: 10px;
    color: #409EFF;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: none;
}

/* 主表格样式 */
.main-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

.main-table th,
.main-table td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
}

.main-table th {
    background-color: #f0f0f0;
}

/* 表格标题样式 */
.table-title {
    font-size: 24px;
    padding: 20px;
}

/* 章节标题样式 */
.section-title {
    font-size: 18px;
    margin: 0px 0px 0px;
}

/* 子表格样式 */
.sub-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.sub-table th,
.sub-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.sub-table th {
    background-color: #f9f9f9;
}

/* 列表样式 */
ol,
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ol li,
ul li {
    margin-bottom: 8px;
}

@media print {
    .job-specification {
        width: 210mm;
    }

    .back-link {
        display: none;
    }

    .page {
        box-shadow: none;
        border: none;
    }
}
</style>